<template>
  <div>
    <el-card>
      <el-row>
        <el-form
          ref="dataform"
          :rules="couserrule"
          :model="course"
        >
          <el-col :span="24" align="left" style="padding:10px">
            <el-button type="primary" @click="addmembers" >添加</el-button>
            <el-button type="primary" @click="savemembers('datafrom')" >保存</el-button>
          </el-col>
          <el-col :span="24">
            <el-table :data="course.members" :border=true style="width: 100%;":key="updatekey">
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="cname" label="课程名" width="150">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '名称不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.cname'"
                    class="el-form-item"
                  >
                    <el-input v-model="scope.row.cname" autocomplete="off" size="small"
                              placeholder="请输入课程名"
                              :disabled="disable"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="课程介绍" width="200">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '课程介绍不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.cintro'"
                    align="left"
                  >
                    <el-input v-model="scope.row.cintro" autocomplete="off"
                              size="small" placeholder="请输入课程介绍"
                              :disabled="disable"
                              type="textarea"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="学时" width="150">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '学时不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.chour'"
                    align="left"
                  >
                    <el-input v-model="scope.row.chour" autocomplete="off" size="small"
                              placeholder="请输入学时"
                              :disabled="disable"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="发布时间" width="250">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.cdate'"
                    align="left"
                  >
                    <el-date-picker
                      v-model="scope.row.cdate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      size="small"
                      :disabled="disable"
                    >
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="课程价格" width="150">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '价格不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.cvalue'"
                    align="left"
                  >
                    <el-input
                      v-model="scope.row.cvalue" autocomplete="off" size="small"
                      placeholder="请输入价格"
                      :disabled="disable">
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="课程容量" width="150">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '课程类型不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.level'"
                    align="left"
                  >
                    <el-select v-model="scope.row.level" :disabled="disable">
                      <el-option label="专升本":value="1"></el-option>
                      <el-option label="高升本":value="2"></el-option>
                      <el-option label="高升专":value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="授课方式" width="150">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '授课方式不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.cway'"
                    align="left"
                  >
                    <el-select v-model="scope.row.cway" :disabled="disable">
                      <el-option label="函授":value="1"></el-option>
                      <el-option label="业余":value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="课程容量" width="150">
                <template slot-scope="scope">
                  <el-form-item
                    :rules="{
                        required: true, message: '课程容量不能为空', trigger: 'blur'
                    }"
                    :prop="'members.' + scope.$index + '.cnum'"
                    align="left"
                  >
                    <el-input v-model="scope.row.cnum" autocomplete="off"
                              size="small" placeholder="请输入课程容量"
                              :disabled="disable">
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100" >
                <template slot-scope="scope">
                  <el-button  type="danger" :disabled="disable" plain @click="delmembers(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
  </div>



</template>
<script>
  export default {
    data() {
      return {
        updatekey: 0,
        disable: false,
        loading: false,
        course:{
          members:[
           {
             uid: sessionStorage.getItem("uid"),
             id: 0,
             cname: '',
             cintro: '',
             chour: '',
             cdate: '',
             cvalue: 0,
             cnum: 0,
             level: '',
             cway: '',
           }
         ]
        },
        couserrule:{
          name:[{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }]
        }
      }
    },
    methods: {
      addmembers() {
        var member = this.course.members;
        console.log(member);
        var length = member.length;
        this.course.members.push(
          {
            uid: sessionStorage.getItem("uid"),
            id: parseInt(length),
            cname: '',
            cintro: '',
            chour: '',
            cdate: '',
            cvalue: 0,
            cnum: 0,
            level: '',
            cway: '',
          });
        this.disable = false;
      },
      delmembers(index, row) {
        var that = this;
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //点击确定的操作(调用接口)
          var hasmembers = that.course.members;
          for (var i = 0; i < hasmembers.length; i++) {
            if (row.id == hasmembers[i].id) {
              that.course.members.splice(i, 1);
              // this.$message({ message: '删除成功', duration: 2000, type: 'success' });
            }
          }
        }).catch(() => {
          //点取消的提示
          return;
        });
      },

      savemembers() {
        this.$refs.dataform.validate((valid) => {
          if (valid) {
            this.$confirm("是否提交", {
              cancelButtonText: "取消",
              confirmButtonText: "确定",
              type: "warning"
            }).then(() => {
              this.$axios.post("/insertcourse",this.course.members).then(res => {
                if(res.data.code === 200){
                  this.$message({
                    type: "success",
                    message: "发布成功，请联系管理员审核"
                  });
                  this.disable = true;
                  this.course.members = undefined;
                  this.course.members = [];
                  this.updatekey = Math.random();
                }else {
                  this.$message({
                    type: "error",
                    message: "发布失败，请联系管理员"
                  });
                }
              })
            })
          }
        })
      },
    }
  }
</script>
<style>
  .hide .el-upload--picture-card {
    display: none;
  }
</style>

